<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>功能选择 | TEFS</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: "Microsoft YaHei", Arial, sans-serif;
    }

    /* 视频背景容器 */
    .background-container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      overflow: hidden;
      background-color: #000;
    }

    /* 背景视频样式 */
    .background-video {
      position: absolute;
      top: 50%;
      left: 50%;
      min-width: 100%;
      min-height: 100%;
      width: auto;
      height: auto;
      transform: translate(-50%, -50%);
      filter: brightness(0.6);
      opacity: 0;
      transition: opacity 0.5s ease-in-out;
    }

    .background-video.loaded {
      opacity: 1;
    }

    body {
      background-color: transparent;
      color: #333;
      position: relative;
    }

    /* 顶部导航栏 */
    .top-nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 20px;
      background: rgba(255, 255, 255, 0.9);
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    }

    .top-nav .logo {
      font-size: 18px;
      font-weight: bold;
      color: #333;
    }

    .top-nav .user-area {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .top-nav .user-area span {
      color: #666;
    }

    .logout-btn, .profile-btn {
      padding: 6px 14px;
      background-color: #ff6347;
      color: #fff;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      transition: background-color 0.2s;
    }

    .profile-btn {
      background-color: #4a86e8;
      margin-right: 10px;
    }

    .profile-btn:hover {
      background-color: #3a76d8;
    }

    .logout-btn:hover {
      background-color: #e55236;
    }

    /* 主容器 */
    .container {
      max-width: 1200px;
      margin: 50px auto;
      padding: 0 20px;
      text-align: center;
    }

    .welcome-title {
      font-size: 2.5rem;
      margin-bottom: 30px;
      color: white;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    }

    .welcome-subtitle {
      font-size: 1.2rem;
      margin-bottom: 50px;
      color: rgba(255, 255, 255, 0.9);
      max-width: 800px;
      margin-left: auto;
      margin-right: auto;
    }

    /* 功能卡片容器 */
    .features-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 40px;
      margin-top: 50px;
    }

    /* 功能卡片样式 - 增加透明度变量便于修改 */
    .feature-card {
      /* 透明度变量：0-1之间调整，当前为0.9（默认值） */
      --card-opacity: 0.5;

      width: 300px;
      height: 350px;
      /* 使用变量控制背景透明度 */
      background: rgba(255, 255, 255, var(--card-opacity));
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
      transition: all 0.3s ease;
      cursor: pointer;
      position: relative;
    }

    .feature-card:hover {
      transform: translateY(-10px);
      box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
    }

    .feature-card:hover .feature-icon {
      transform: scale(1.1);
    }

    .feature-icon {
      width: 100%;
      height: 180px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
    }

    /* 统一所有图标的大小和显示方式 */
    .feature-icon img,
    .feature-icon svg {
      width: 80px;
      height: 80px;
      object-fit: contain;
    }

    .feature-content {
      padding: 20px;
      text-align: center;
    }

    .feature-title {
      font-size: 1.5rem;
      margin-bottom: 10px;
      color: #333;
    }

    .feature-description {
      color: #666;
      font-size: 1rem;
      line-height: 1.5;
    }

    /* 底部固定黑框 */
    .footer {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      background: rgba(51, 51, 51, 0.9);
      color: #fff;
      text-align: center;
      padding: 12px 0;
      font-size: 12px;
    }
  </style>
</head>

<body>
  <!-- 视频背景容器 -->
  <div class="background-container">
    <video class="background-video" autoplay muted loop playsinline>
      <source src="/static/videos/c1.mp4" type="video/mp4">
      <source src="/static/videos/background.webm" type="video/webm">
      您的浏览器不支持视频背景
    </video>
  </div>

  <!-- 顶部导航 -->
  <div class="top-nav">
    <div class="logo">TEFS</div>
    <div class="user-area">
      <span>用户</span>
      <span>{{ username }}</span>
      <a href="{{ url_for('profile') }}">
        <button class="profile-btn">账户设置</button>
      </a>
      <a href="{{ url_for('logout') }}">
        <button class="logout-btn">登出</button>
      </a>
    </div>
  </div>

  <!-- 主容器 -->
  <div class="container">
    <h1 class="welcome-title">欢迎使用 TEFS 系统</h1>
    <p class="welcome-subtitle">选择您需要的功能，开始高效处理教学视频内容</p>

    <!-- 功能卡片区域 -->
    <div class="features-container">
      <!-- 文本提取功能卡片 -->
      <div class="feature-card" onclick="location.href='{{ url_for('dashboard') }}'">
        <div class="feature-icon" style="background-color: #50d8e0;">
          <img src="https://cdn-icons-png.flaticon.com/512/1383/1383657.png" alt="文本提取图标">
        </div>
        <div class="feature-content">
          <h3 class="feature-title">视频文本提取</h3>
          <p class="feature-description">
            上传教学视频，自动提取语音内容并生成带时间戳的文本文件。支持多种语言和模型选择。
          </p>
        </div>
      </div>

      <!-- 音频替换功能卡片 -->
       <div class="feature-card" onclick="location.href='{{ url_for('audio_replace') }}'">
        <div class="feature-icon" style="background-color: #9c88ff;">
          <svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 16 16"><path fill="currentColor" d="M11.4 10.5c0 1.2-.4 2.2-1 3l.4.5c.7-.9 1.2-2.1 1.2-3.5s-.5-2.6-1.2-3.5l-.4.5c.6.8 1 1.9 1 3"></path><path fill="currentColor" d="m9.9 8l-.4.5c.4.5.7 1.2.7 2s-.3 1.5-.7 2l.4.5c.5-.6.8-1.5.8-2.5s-.3-1.8-.8-2.5"></path><path fill="currentColor" d="m9.1 9l-.4.5c.2.3.3.6.3 1s-.1.7-.3 1l.4.5c.3-.4.5-.9.5-1.5S9.4 9.4 9.1 9"></path><path fill="currentColor" d="M10 0H2v16h12V4zM9 5h4v10H3V1h6zm1-1V1l3 3z"></path><path fill="currentColor" d="M6 9H4v3h2l2 2V7z"></path></svg>
          </div>
        <div class="feature-content">
          <h3 class="feature-title">音频替换</h3>
          <p class="feature-description">
            替换视频原有音频轨道，支持多格式音频导入，自动匹配视频时长，保留画面同步性。
          </p>
        </div>
      </div>

      <!-- 字幕添加功能卡片 -->
      <div class="feature-card" onclick="location.href='{{ url_for('add_subtitles') }}'">
        <div class="feature-icon" style="background-color: #fbc531;">
          <svg xmlns="http://www.w3.org/2000/svg" width="256" height="227.55555555556" viewBox="0 0 432 384"><path fill="currentColor" d="M384 21q18 0 30.5 12.5T427 64v256q0 18-12.5 30.5T384 363H43q-18 0-30.5-12.5T0 320V64q0-18 12.5-30.5T43 21zM43 192v43h85v-43zm213 128v-43H43v43zm128 0v-43h-85v43zm0-85v-43H171v43z"></path></svg>
        </div>
        <div class="feature-content">
          <h3 class="feature-title">字幕添加</h3>
          <p class="feature-description">
            上传字幕文 件或输入文本，自动生成多风格字幕轨道，支持字体、颜色、位置自定义调整。
          </p>
        </div>
      </div>
    </div>
  </div>

  <!-- 底部固定黑框 -->
  <div class="footer">
    产品由句号团队开发
  </div>

  <script>
    // 视频加载完成后显示
    document.addEventListener('DOMContentLoaded', function() {
      const backgroundVideo = document.querySelector('.background-video');

      // 监听视频加载完成事件
      backgroundVideo.addEventListener('loadeddata', function() {
        backgroundVideo.classList.add('loaded');
      });

      // 备用：如果视频加载缓慢，设置超时显示
      setTimeout(function() {
        if (!backgroundVideo.classList.contains('loaded')) {
          backgroundVideo.classList.add('loaded');
        }
      }, 3000);
    });
  </script>
</body>
</html>